<template>
    <view class="bg-[#F3F5F9] min-h-screen">
        <up-navbar title="排队免单" :safeAreaInsetTop="true" bgColor="#FFF" :placeholder="true">
			<template #left>
				<view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
					<up-icon name="arrow-left" size="19" @click="goback"></up-icon>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
					<up-icon name="home" size="20" @click="gohome"></up-icon>
				</view>
			</template>
		</up-navbar>
        <view class="mx-[30rpx] my-[24rpx] rounded-[8rpx] px-[30rpx] blurBg">
            <view class="py-[30rpx]">
                <view class="flex items-start justify-between">
                    <view class="text-[26rpx] text-[#fff] font-bold mb-[24rpx]">社区公益基金(资金额度)</view>
                    <view @click="toLink" class="px-[16rpx] py-[4rpx] bg-[#46A7FD] text-[#fff] font-normal text-[24rpx]">提现</view>
                </view>
                <view class="text-[48rpx] text-[#fff] font-bold">{{ thousands(Detail.dayReturnAmountTotal) }}</view>
            </view>
            <up-line color="#fff"></up-line>
            <view class="py-[30rpx]">
                <view class="mb-[20rpx] flex just-between">
                    <view class="flex items-center flex-1">
                        <view class="text-[26rpx] text-[#fff] font-normal mr-[12rpx]">今日收益</view>
                        <view class="bg-[#46A7FD] rounded-[18rpx] h-[36rpx] flex items-center pr-[22rpx]">
                            <image src="../static/up.png" mode="scaleToFill" class="ml-[12rpx] w-[24rpx] h-[24rpx] block mr-[12rpx]"/>
                            <view class="text-[22rpx] text-[#fff] font-normal mr-[22rpx]">{{ Detail.dayReturnRate }}</view>
                        </view>
                    </view>
                    <view class="flex items-center flex-1">
                        <view class="text-[26rpx] text-[#fff] font-normal mr-[12rpx]">免单金额</view>
                        <view class="bg-[#46A7FD] rounded-[18rpx] h-[36rpx] flex items-center pr-[22rpx]">
                            <image src="../static/down.png" mode="scaleToFill" class="ml-[12rpx] w-[24rpx] h-[24rpx] block mr-[12rpx]"/>
                            <view class="text-[22rpx] text-[#fff] font-normal ">{{ Detail.distributionReturnRate }}</view>
                        </view>
                    </view>
                </view>
                <view class="flex justify-between">
                    <view class="flex-1 text-[32rpx] text-[#fff] font-normal">{{ thousands(Detail.dayReturnAmountDay) }}</view>
                    <view class="flex-1 text-[32rpx] text-[#fff] font-normal">{{ thousands(Detail.dayReturnAmount) }}</view>
                </view>
            </view>
        </view>
        <view class="mx-[30rpx]">
            <view class="tab-page">
                <view class="tab-list">
                    <view v-for="tab in tabList" :key="tab.id" class="tab-item":class="activeTab === tab.id ? 'tab-selected' : 'not-selected'" @click="onTab(tab.id)">
                        <view class="tab-label">{{ tab.label }}</view>
                    </view>
                </view>
             </view>
        </view>
        <view class="mx-[30rpx] bg-[#fff] p-[24rpx]">
            <view class="border-[1rpx] flex rounded-[16rpx] box p-[12rpx] mb-[24rpx]" v-for="(item,index) in list" :key="index">
                <view class="mr-[12rpx] flex-shrink-0 ">
                    <image :src="item.avatar" class="w-[60rpx] h-[60rpx] rounded-[50%] block"/>
                </view>
                <view class="flex-1">
                    <view class="flex justify-between mt-[14rpx] mb-[20rpx]">
                        <view class="text-[24rpx] text-[#333] font-noraml">{{ item.nickName }}</view>
                        <view class="text-[24rpx] text-[#666] font-normal">支付金额 ￥{{ item.should }}</view>
                        <view class="text-[24rpx] text-[#101010] font-normal">免单金额 ￥{{ item.actual }}</view>
                    </view>
                    <view class="flex mb-[12rpx]">
                        <view class="text-[24rpx] text-[#333] font-normal mr-[32rpx]">免单排队</view>
                        <view class="text-[24rpx] text-[#333] font-normal">
                            <text>第</text>
                            <text class="text-[#46A7FD]">{{ item.orderorder }}</text>
                            <text>位</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { computed, reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { GetQueueComplete, GetQueuePage, GetStoreInfo } from '../../API/rebate'
const { gohome , goback } = useTable()
const { onTab , activeTab , tabList , getList , toLink } = useTab()
const { Detail , GetDetail , thousands } = useDateil()
function useTable(){
    const gohome = () => {
        uni.switchTab({
            url:'/pages/index/index'
        })
    }
    const goback = () => {
        uni.navigateBack()
    }
    return { gohome , goback }
}
function useDateil(){
    const Detail = ref({})
    const GetDetail = async () => {
        let { data } = await GetStoreInfo()
        Detail.value = data
    }
    const thousands = computed(()=>(value)=>{
        return new Intl.NumberFormat('en-US').format(value)
    })
    return { Detail , GetDetail , thousands}
}
function useTab(){
    const activeTab = ref(0)
    const pageObj = reactive({
        pageNum:1,
        pageSize:10,
    })
    const tabList = ref([
        { label: '排队中', id: 0},
        { label: '已免单', id: 1},
    ])
    const list = ref([])
    const  onTab = async (id)=> {
        activeTab.value = id;
        await getList()
    }
    const getList = async () => {
        if(activeTab.value){
            let { rows , total } = await GetQueueComplete(Detail.value.id,pageObj)
            list.value = rows
        }else{
            let { rows , total } = await GetQueuePage(Detail.value.id,pageObj)
            list.value = rows
        }
    }
    const toLink = ()=>{
        uni.navigateTo({ url: `/community/purse/purse?resource=${5}` })
    }
    return{ onTab , activeTab , tabList , getList , list , toLink }
}
onLoad(async()=>{
    await GetDetail()
    await getList()
})
</script>

<style lang="scss" scoped>
    $tab-height: 62px;
    $active-color: #ffffff;
    $default-color: #DAEDFF;
    $primary-color: #333333;
  
  
    .tab-list {
      display: flex;
      position: relative;
      z-index: 2;
      border-radius: 12px 12px 0 0;
      background-color: $default-color;
      overflow: hidden; // 重点
  
      .tab-item {
        flex: 1;
        height: $tab-height;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px;
        color: $primary-color;
        font-weight: 600;
        position: relative;
      }
  
      .tab-icon {
        width: 17px;
        height: 17px;
        margin-right: 4px;
        margin-top: 1px;
      }
  
      .tab-selected {
        opacity: 1;
        background: #ffffff;
        border-radius: 12px 12px 0 0;
        box-shadow: 24px 50px 0 $active-color, -24px 50px 0 0 $active-color; // 重点
  
        .tab-label {
          transform: scale(1.2);
        }
      }
  
      .not-selected {
        color: #333333;
      }
  
      .tab-selected::before {
        content: '';
        position: absolute;
        left: -6px;
        bottom: 0;
        width: 12px;
        height: $tab-height;
        border-top-left-radius: 12px;
        background-color: $active-color;
        transform: skewX(-15deg); // 重点
      }
  
      .tab-selected::after {
        content: '';
        position: absolute;
        right: -6px;
        bottom: 0;
        width: 12px;
        height: $tab-height;
        border-top-right-radius: 12px;
        background-color: $active-color;
        transform: skewX(15deg); // 重点
  
      }
  
      .not-selected::before {
        content: '';
        position: absolute;
        left: 6px;
        bottom: 0;
        width: 12px;
        height: $tab-height;
        background: $default-color;
        border-bottom-left-radius: 12px;
        transform: skewX(15deg); // 重点
      }
  
      .not-selected::after {
        content: '';
        position: absolute;
        right: 6px;
        bottom: 0;
        width: 12px;
        height: $tab-height;
        background: $default-color;
        border-bottom-right-radius: 12px;
        transform: skewX(-15deg); // 重点
        z-index: 1;
      }
  
      .tab-label {
        display: inline-block
      }
    }
.blurBg{
    background: linear-gradient( 90deg, #5578F3 0%, #69A7F6 100%);
}
.box{
    box-shadow: 0rpx 0rpx 8rpx 2rpx rgba(0,0,0,0.08);
}
</style>